<template>
  <div class="parent-wrapper">
    <h2>👨‍👧‍👦 父组件（中转通信）</h2>
    <SiblingA />
    <SiblingB />
  </div>
</template>

<script setup>
import { provide } from 'vue'
import mitt from 'mitt'
import SiblingA from './SiblingA.vue'
import SiblingB from './SiblingB.vue'

// 创建事件总线
const bus = mitt()

// 提供给子组件使用
provide('siblingBus', bus)
</script>

<style scoped>
.parent-wrapper {
  border: 3px solid #6f42c1;
  padding: 25px;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.parent-wrapper h2 {
  margin-top: 0;
  color: #6f42c1;
}
</style>
